import VueRouter from "vue-router";
import Home from "@/pages/Home/Home";
import About from "@/pages/About";
import News from "@/pages/Home/News";
import Message from "@/pages/Home/Message/Message";
import Detail from "@/pages/Home/Message/Detail";

export default new VueRouter({
    routes: [
        {
            name: 'Home',
            path: '/Home',
            component: Home,
            children: [
                {
                    name: 'News',
                    path: 'News',
                    component: News
                },
                {
                    name: 'Message',
                    path: 'Message',
                    component: Message,
                    children: [
                        {
                            name: 'Detail',
                            // path: 'Detail/:id/:title', // params写法
                            path: 'Detail',
                            component: Detail,
                            /*props的第一种写法，很少使用*/
                            /*props:{
                                a:1,
                                b:'Hello'
                            }*/

                            /*props的第二种写法，值为布尔值，如果为true，就会把该路由组件收到的所有params参数以props形式传给组件的props属性（需要在vc的props中声明），但不会理会query参数*/
                            // props:true,

                            /*props第三种写法，值为函数，会把该路由组件收到的所有参数以props形式传给组件的props属性（需要在vc的props中声明）*/
                            props($route) {
                                return {
                                    id: $route.query.id,
                                    title: $route.query.title
                                }
                            },
                        },
                    ]
                },
            ]
        },
        {
            name: 'About',
            path: '/About',
            component: About
        },
    ]
})